<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstarp -->
    <script type="text/javascript" src="../js/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css">
    <!-- 引入bootstrap table的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootstrap datetime的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <!-- 引入bootstrap bootbox的css、js -->
    <script type="text/javascript" src="../js/bootstrap-bootbox/bootbox.js"></script>
</head>
<body>
<form class="form-inline">
    <div class="form-group">
        <label for="storeName">
            <font color="red">店铺名称</font>
        </label>
        <input type="text" class="form-control" id="storeName" placeholder="请输入店铺名称">
        <label for="startDate">
            <font color="red">时间</font>
        </label>
        <input type="text" class="date form-control" id="startDate" placeholder="请输入开始时间">
        <i class="glyphicon glyphicon-calendar"></i>
        <input type="text" class="date form-control" id="endDate" placeholder="请输入结束时间">
    </div>
    <button type="button" class="btn btn-primary glyphicon glyphicon-search" onclick="searchUser()">搜索</button>
    <button type="button" class="btn btn-danger glyphicon glyphicon-remove" onclick="delUser()">删除店铺</button>

</form>
<table class="table" id="userShopTable"></table>
</body>
<script>
    $(function () {
        tables();

    })
    /**
     * 初始化页面加载所有用户店铺信息
     */
    function tables(){
        $("#userShopTable").bootstrapTable({
            url:'../zsl/findUserShopList',
            type:'post',
            pagination:true, //开启分页
            //pageList:[1, 5, 10, 15,50],//分页组件
            pageNumber:1,
            pageSize:10,//默认每页条数
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页
            striped:true,//条纹表格
            clickToSelect: true,
            queryParams:function(){
                return {
                    page:this.pageNumber,
                    rows:this.pageSize,
                    storeName:$("#storeName").val(),
                    startTime:$("#startDate").val(),
                    endTime:$("#endDate").val()
                };
            },
            columns:[
                {checkbox:true},
                {field:'storeName',title:'店铺名称',width:80},
                {field:'productImg',title:'店铺头像',width:80,formatter:function(value,row,index){
                        return "<img src='"+value+"' width='50px' height='50px'/>";
                    }},
                {field:'userName',title:'店主',width:80},
                {field:'userImg',title:'店主头像',width:80,formatter:function(value,row,index){
                        return "<img src='"+value+"' width='50px' height='50px'/>";
                    }},
                {field:'orderCreateTime',title:'店铺注册时间',width:80},
                {field:'storeType',title:'商家状态',width:80,formatter:function (value) {
                    if (value == 3){
                        return "<font color='red'>营业中</font>"
                    }
                    }},
                {field:'aww',title:'修改',width:80,formatter:function(value,row,index){
                        return "<a href='javascript:findShopByStoreId("+row.storeId+")'>查看本店铺商品</a>";
                    }}
            ],
        })
    }
    /**
     * 打开弹框
     */
    var res;
    function createAddContent(url){
        $.ajax({
            url:url,
            async:false,
            success:function(data){
                res = data;
            }
        });
        return res;
    }
    /**
     * 根据店铺id查询店铺商品信息
     */
    function findShopByStoreId(id){
        bootbox.dialog({
            title: '<i class="glyphicon glyphicon-film"></i>   查询商品信息信息',
            message: createAddContent("../page/shopByStoreId"),
            size: 'large',
            buttons: {
                cancel: {
                    label: "<i class='glyphicon glyphicon-remove'></i>取消",
                    className: 'btn-danger',
                    callback: function(){
                    }
                },
                ok: {
                    label: "<i class='glyphicon glyphicon-floppy-open'></i>关闭",
                    className: 'btn-info',
                    callback: function(){
                    }
                }
            }
        });
        shopTables(id);
    }
    /**
     * 店铺调查
     */
    function searchUser() {
        $("#userShopTable").bootstrapTable('refresh');
    }
    /**
     * 初始化页面加载所有店铺商品信息
     */
    function shopTables(id){
        $("#shopTable").bootstrapTable({
            url:'../zsl/shopTable?id='+id,
            type:'post',
            pagination:true, //开启分页
            //pageList:[1, 5, 10, 15,50],//分页组件
            pageNumber:1,
            pageSize:10,//默认每页条数
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页
            striped:true,//条纹表格
            clickToSelect: true,
            queryParams:function(){
                return {
                    page:this.pageNumber,
                    rows:this.pageSize,
                    productName:$("#productName").val(),
                    startPrice:$("#startPrice").val(),
                    endPrice:$("#endPrice").val()
                };
            },
            columns:[
                {checkbox:true},
                {field:'productImg',title:'商品图片',width:80,formatter:function(value,row,index){
                        return "<img src='"+value+"' width='50px' height='50px'/>";
                    }},
                {field:'productState',title:'是否上架',width:80,formatter:function (value) {
                    return value == 1 ? '上架':'下架'
                    }},
                {field:'productPrice',title:'商品价格',width:80},
                {field:'productName',title:'商品名称',width:80},
                {field:'productDeliveryTime',title:'发售时间',width:80},
                {field:'productColor',title:'商品颜色',width:80},
                {field:'typeName',title:'商品类型',width:80},
                {field:'storeName',title:'所属店铺',width:80},
                {field:'stockNumber',title:'库存',width:80},
                {field:'paymentName',title:'支持支付方式',width:80},
                {field:'aww',title:'修改',width:80,formatter:function(value,row,index){
                        return "<a href='javascript:findOrderByShopId("+row.productId+")'>本商品所有订单</a>";
                    }}
            ],
        })
    }
    /**
     * 商品调查
     */
    function shopTable() {
        $("#shopTable").bootstrapTable('refresh');
    }
    /**
     * 打开订单弹框
     */
    function findOrderByShopId(id){
        bootbox.dialog({
            title: '<i class="glyphicon glyphicon-film"></i>   查询商品信息信息',
            message: createAddContent("../page/orderByShopId"),
            size: 'large',
            buttons: {
                cancel: {
                    label: "<i class='glyphicon glyphicon-remove'></i>取消",
                    className: 'btn-danger',
                    callback: function(){
                    }
                },
                ok: {
                    label: "<i class='glyphicon glyphicon-floppy-open'></i>关闭",
                    className: 'btn-info',
                    callback: function(){
                    }
                }
            }
        });
        orderTable(id);
    }

    /**
     * 查询本店铺商品的订单
     */
    function orderTable(id){
        $("#orderTable").bootstrapTable({
            url:'../zsl/orderTable?id='+id,
            type:'post',
            pagination:true, //开启分页
            //pageList:[1, 5, 10, 15,50],//分页组件
            pageNumber:1,
            pageSize:10,//默认每页条数
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页
            striped:true,//条纹表格
            clickToSelect: true,
            queryParams:function(){
                return {
                    page:this.pageNumber,
                    rows:this.pageSize,
                    orderName:$("#orderName").val(),
                    startDate:$("#startTime").val(),
                    endDate:$("#endTime").val()
                };
            },
            columns:[
                {checkbox:true},
                {field:'orderNo',title:'订单号',width:80},
                {field:'userId',title:'买家id',width:80},
                {field:'productImg',title:'商品图片',width:80,formatter:function(value,row,index){
                        return "<img src='"+value+"' width='50px' height='50px'/>";
                    }},
                {field:'productPrice',title:'商品价格',width:80},
                {field:'orderCreateTime',title:'下单时间',width:80},
                {field:'userName',title:'买家名称',width:80},
                {field:'productName',title:'商品名称',width:80},
                {field:'productColor',title:'商品颜色',width:80},
                {field:'typeName',title:'商品类型',width:80},
                {field:'paymentName',title:'支付方式',width:80}
            ],
        })
    }
    /**
     * 查询本店铺商品的订单调查
     */
    function searchOrder() {
        $("#orderTable").bootstrapTable('refresh');
    }
    /**
     * 时间
     */
    $('.date').datetimepicker({
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd hh:ii:ss',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    });
</script>
</html>